<template>
<div class="color-item box-shadow_2">
    <div class="top" @click="toPath">
        <div class="one item"
            :style="{
                backgroundColor:itemData.one,
            }">
            <div class="copy">
                <Copy
                    :title="itemData.one"
                    :content="itemData.one">
                </Copy>
            </div>
        </div>
        <div class="two item"
            :style="{
                backgroundColor:itemData.two,
            }">
            <div class="copy">
                <Copy
                    :title="itemData.two"
                    :content="itemData.two">
                </Copy>
            </div>
        </div>
        <div class="three item"
            :style="{
                backgroundColor:itemData.three,
            }">
            <div class="copy">
                <Copy
                    :title="itemData.three"
                    :content="itemData.three">
                </Copy>
            </div>
        </div>
        <div class="four item"
            :style="{
                backgroundColor:itemData.four,
            }">
            <div class="copy">
                <Copy
                    :title="itemData.four"
                    :content="itemData.four">
                </Copy>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="left">
            <Like
                :like_data="{
                    color:itemData.id,
                }"
                :object_data="{
                    color:itemData,
                }"
                :like_number="itemData.like">
            </Like>
        </div>
        <div class="right">
            <Date
                :date="itemData.init_date">
            </Date>
        </div>
    </div>
</div>
</template>

<script>
//配色展示组件
import Like from '@/components/other/Like';
import Date from '@/components/other/Date';
import Copy from '@/components/other/Copy';
export default {
    components: {
        Like,Date,Copy,
    },
    props:{
        itemData:{ //对象数据
            type:Object,
            default:()=>{
                return {};
            },
        },
    },
    data(){
        return{
        };
    },
    methods:{
        toPath(){
            this.$router.push({
                name:'Color',
                id:this.itemData.id,
            }).catch(()=> {
                return;
            });
        },
    },
}
</script>
<style lang="scss" scoped>
.color-item{
    width: 100%;
    border: none;
    background-color: white;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    >.top{
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
        >.item{
            width: 100%;
            position: relative;
            transition: all 0.2s;
            >.copy{
                width: fit-content;
                position: absolute;
                bottom: 0;
                left: 0;
                opacity: 0;
                transition: all 0.2s;
                /deep/.Copy{
                    border-radius: 0px 3px 0 0;
                    font-size: 1.3rem;
                }
            }
            &:hover{
                >.copy{
                    opacity: 1;
                }
            }
        }
        >.one{
            height: 80px;
        }
        >.two{
            height: 60px;
        }
        >.three{
            height: 40px;
        }
        >.four{
            height: 40px;
        }
    }
    >.bottom{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        >.left{
            margin-right: 10px;
        }
    }
}
</style>

